<!DOCTYPE html>
<html>
	<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./stylesheets/index.css">
		<style type="text/css">
	#box {
  width: 1100px;
  height: 600px;
  background: blueviolet url(img/416dacd50412248251eb6d0afaf1d18.jpg)center / cover no-repeat;
  border-radius: 5px;
  padding: 5px;
  margin: 0 auto;
}

#box > [class*=icon] {
 margin: 0 auto;
 position:relative;
 top: 50%;
 margin-top: -100px;
  width: 41px;
  height: 69px;
cursor: pointer;
}

#box > .left-icon {
 margin-left: 0px;
  background: url(img/icon-slides.png) 82px center;
}

#box > .right-icon {
margin-right:0px ;
  background: url(img/icon-slides.png) 41px center;
}

#box > .left-icon:hover {
  background-position: 0;
}

#box > .right-icon:hover {
  background-position: -42px center;
}

#box > .circle {
  padding: 10px;
  position: absolute;
  color:azure;
  bottom: 20px; 
  margin: 350px 450px;
}
#box > .circle li {
  float: left;
  width: 10px;
  height: 10px;
clip-path: circle(50%);
height:1em;
width: 1em;
  border: 2px solid hsla(0,0%,100%,.3);
  background-color: rgb(256 102 0 / .4);
  margin: 0 4px;
}}

#box > .circle li.active {
  background: hsla(0,0%,100%,.4);
  border-color: rgb(0 0 0 / .4);
}
		</style>
	</head>
	<body>
 <div id="box" class="center">
    <div class="left-icon"></div>
    <div class="right-icon"></div>
    <ul class="circle clearfix">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
 </div>		
	</body>
</html>
